
<main class="content square swiper-container"><!-- square 方形 -->
    <section class="ranking ">
        <span></span>
        <a class="icon button" href="javascript:"></a>
    </section>

    <section class="swiper-wrapper">
        <!-- 综合 -->
        <section class="swiper-slide" >
            <section class="product_list ">

                <div ng-if="arr[0].noDataFlag" class="isNotDataHint">
                    <i class="iconfont icon-cry1"></i>
                    <p>暂无数据</p>
                </div>

                <section class="product" ng-repeat="item in arr[0].data">
                    <span class="pic"><a href=""><img ng-src="{{item.bannerurl}}"></a></span>
                    <section class="text">
                        <p><a ng-href="#/gooddetail/{{item.id}}" >{{item.title}}</a></p>
                        <em>现价：{{item.minprice | currency:'￥'}}</em>
                        <em>指导价：{{item.oldprice | currency:'￥'}}</em>
                        <a class="icon" href="">&#xe68d;</a>
                    </section>
                </section>
            </section>
            <section class="load" ng-if="arr[0].moreDataFlag" ng-click="getData(0)"><a href="">加载更多</a></section>
        </section>


        <!-- 价格 -->
        <section class="swiper-slide">
            <section class="product_list">

                <div ng-if="arr[2].noDataFlag" class="isNotDataHint">
                    <i class="iconfont icon-cry1"></i>
                    <p>暂无数据</p>
                </div>

                <section class="product" ng-repeat="item in arr[2].data">
                    <span class="pic"><a href=""><img ng-src="{{item.bannerurl}}"></a></span>
                    <section class="text">
                        <p><a ng-href="#/gooddetail/{{item.id}}" >{{item.title}}</a></p>
                        <em>现价：{{item.minprice | currency:'￥'}}</em>
                        <em>指导价：{{item.oldprice | currency:'￥'}}</em>
                        <a class="icon" href="">&#xe68d;</a>
                    </section>
                </section>
            </section>
            <section class="load" ng-if="arr[2].moreDataFlag" ng-click="getData(2)"><a href="">加载更多</a></section>
        </section>

        <!-- 最新 -->
        <section class="swiper-slide"  >
            <section class="product_list">

                <div ng-if="arr[1].noDataFlag" class="isNotDataHint">
                    <i class="iconfont icon-cry1"></i>
                    <p>暂无数据</p>
                </div>

                <section class="product" ng-repeat="item in arr[1].data" >
                    <span class="pic"><a href=""><img ng-src="{{item.bannerurl}}"></a></span>
                    <section class="text">
                        <p><a ng-href="#/gooddetail/{{item.id}}" >{{item.title}}</a></p>
                        <em>现价：{{item.minprice | currency:'￥'}}</em>
                        <em>指导价：{{item.oldprice | currency:'￥'}}</em>
                        <a class="icon" href="">&#xe68d;</a>
                    </section>
                </section>
            </section>
            <section class="load" ng-if="arr[1].moreDataFlag" ng-click="getData(1)"><a href="">加载更多</a></section>
        </section>


    </section>

</main>

<script>

    $('a.button').click(function() {
        if (
            $('.content').hasClass('square')) {
            $('.content').removeClass('square');
        }else{
            $('.content').addClass('square');
        }
    });

    var mySwiper = new Swiper('.content',{
        pagination: '.ranking span',
        paginationClickable: true,
        //autoHeight: true,
        paginationBulletRender: function (index, className) {
            switch (index) {
                case 0: name='综合';break;
                case 1: name='价格';break;
                case 2: name='最新';break;
                default: name='';
            }
            return '<a  ng-click="test('+index+')" href="javascript:" class="' + className + '">' + name + '</a>';
        }
    });
</script>